<template>
  <div class="titleborder">
    <div class="out-container" :style="outStyle">
      <div
        class="titlespan"
        :style="titleStyle"
      >
        {{ borderOptions.bordertitle }}
        <span style="color: #4FC7FF">
          {{ borderOptions.borderunit }}
        </span>
      </div>
      <div class="titlecontent" :style="borderOptions.titleContent">
        <slot />
      </div>
    </div>
  </div>
</template>

<script>
import defaultmixins from '@/mixins/bigScreen/defaultmixins'

export default {
  name: 'TableBorder',
  mixins: [defaultmixins],
  props: ['title'],
  data() {
    return {
      backUrl: require('@/assets/linglong/bg_yongdiantitle_hover.png')
    }
  },
  computed: {
    titleStyle() {
      return {
        ...this.borderOptions.titleSpan,
        backgroundImage: `url(${this.backUrl})`,
        width: 273 * this.$root.setting.scale + 'px',
        height: 60 * this.$root.setting.scale + 'px',
        fontSize: 38 * this.$root.setting.scale + 'px',
        fontWeight: 400,
        color: 'rgba(255,255,255,1)',
        lineHeight: 60 * this.$root.setting.scale + 'px'
      }
    },
    outStyle() {
      return {
        width: 1072 * this.$root.setting.scale + 'px',
        height: 420 * this.$root.setting.scale + 'px'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .out-container {
    background: rgba(20, 48, 91, 0.6);
    padding-top: 20px;
  }

  .titleborder {
    height: 100%;
    width: 100%;
  }

  .titlespan {
    height: 30px;
    // border: 1px dashed #fffdef;
    width: fit-content;
    background-size: 100% 100%;
    margin-left: 20px;
  }

  .titlecontent {
    height: calc(100% - 30px);
  }

  .lbdiv {
  }
</style>
